<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/profile.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:17:47 GMT -->

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 个人资料</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="././public/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="././public/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="././public/h+/css/animate.min.css" rel="stylesheet">
    <link href="././public/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="./public/sweetAlert/dist/sweetalert.css" rel="stylesheet">
    <style media="screen">
        .story {
            text-indent: 2em;
        }

        .hertmsg eml {
            display: block;
            width: 150px;
            height: 20px;
            background-color: #BABABA;
        }

        .hertmsg eml i {
            display: block;
            height: 100%;
            width: 0px;
        }

        .story textarea {
            width: 100% !important;
            height: 100px;
            padding: 5px;
            resize: none;
            display: block;
        }

        .story textarea:disabled {
            background-color: #ffffff;
        }

        .hertmsg p:nth-of-type(1) i {
            background-color: #F2C500;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(2) i {
            background-color: #F59D00;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(3) i {
            background-color: #2C97DE;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(4) i {
            background-color: #1ECA6B;
            transition: all 1s;
        }

        .nav-tabs>li>a {
            padding: 10px;
        }

        .tabs-container .nav-tabs>li.active>a,
        .tabs-container .nav-tabs>li.active>a:focus,
        .tabs-container .nav-tabs>li.active>a:hover {
            border-top: 3px solid #00A383;
        }

        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:focus,
        .nav-tabs>li.active>a:hover {
            border-top: 3px solid #00A383;
        }

        .bianjiBtn {
            margin: 0 auto;
            display: block;
        }

        .ibox-title h3 {
            display: inline-block;
        }

        .tab-content textarea {
            display: block;
            width: 100% !important;
            resize: none;
            height: 70px;
        }

        .tab-content [type='text'] {
            width: 7em;
            display: inline-block;
        }
        .nav-tabs>li>a{
            width: 84px;
            height: 84px;
        }
        .nav-tabs>li>a>img{
            width: 100%;
            height: 100%;
        }
        /* .contemt{
                    background: rgba(255, 255, 255, 0.5);
                }
        .ibox-content,.ibox-title{
            background-color: transparent;
        }
        .backgroundImg{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            background-image: url('http://ossweb-img.qq.com/images/lol/web201310/skin/big53000.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: fixed;
        } */

        .image-picker {
            overflow: hidden;
            position: relative;
        }

        .image-picker::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        /* .mouseover */
        .mouseover::after {
            content: '英雄图';
            background: hsla(0, 0%, 0%, 0.5);
        }
        .iSelect{
            display: inline-block;
            width: 50px;
            float: right;
            margin-top: -20px;
            margin-right: 30px;
        }
        .mouseoverDiv{
            width: 86px;
            height: 91px;
            position: relative;
            margin-top: -93px;
        }
        .mouseover1::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            content: '技能图';
            background: hsla(0, 0%, 0%, 0.5);
        }

        .firstimg{
            width: 80px;
            height: 80px;
            margin: 10px auto;
            background-color: #fff;
        }
        .twoimg{
            width: 100%;
        }
    </style>
</head>

<body class="gray-bg">
    <!-- <div class="backgroundImg"></div> -->
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-sm-4 col-sm-offset-4 contemt">
                <div class="ibox float-e-margins">
                        <!-- <form action="hero.tpl"> -->
                    <div class="ibox-title">
                        <h3>英雄资料</h3>
                    </div>
                    <div>
                        <div class="ibox-content no-padding border-left-right">
                            <div class="image-picker">
                                <img id="img" class="img-responsive imgUpload firstimg" src="./public/img/拳头.png">
                            </div>
                        </div>
                        <div class="ibox-content no-padding border-left-right">
                            <div class="image-picker">
                                <img id="big_img" class="img-responsive imgUpload twoimg" src="http://f12.baidu.com/it/u=1259339287,1128679855&fm=72">
                            </div>
                        </div>
                        <div class="ibox-content profile-content">
                                <p> 
                                    <input type="text" placeholder="英雄名称" id="name" class="form-control" value="">
                                </p>
                                <p>
                                    <input type="text" placeholder="英雄称号" id="big_name" class="form-control" value="">
                                </p>
                            <p>
                            <select id="type" class="form-control">
                                <option value="0"  selected = "selected" disabled>英雄类型</option>
                                {{foreach $type as $i}}
                                    {{if $i['type'] == $profile['type']}}
                                    <option value="{{$i['id']}}">{{$i['type']}}</option>
                                    {{else}}
                                    <option value="{{$i['id']}}">{{$i['type']}}</option>
                                    {{/if}}
                                {{/foreach}}
                            </select>
                            </p>
                            <div class="hertmsg">
                                <p>
                                    防御能力
                                    <eml>
                                        <i style="width: 0%;"></i>
                                    </eml>
                                    <select id="live" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/for}}
                                    </select>
                                </p>
                                <p>
                                    物理攻击
                                    <eml>
                                        <i style="width: 0%;"></i>
                                    </eml>
                                    <select id="physics" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}} 
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/for}}
                                    </select>
                                </p>
                                <p>
                                    魔法攻击
                                    <eml>
                                        <i style="width: 0%;"></i>
                                    </eml>
                                    <select id="magic" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/for}}
                                    </select>
                                </p>
                                <p>
                                    上手难度
                                    <eml>
                                        <i style="width: 0%;"></i>
                                    </eml>
                                    <select id="difficulty" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/for}}
                                    </select>
                                </p>

                            </div>

                            <h4>
                                技能介绍
                            </h4>

                            <div class="skills">
                                <div class="">
                                    <div class="tabs-container">
                                        <ul class="nav nav-tabs">
                                            <li class="active">
                                                <a class="image-picker" data-toggle="tab" href="#tab-1" aria-expanded="true">
                                                    <img id="pimg" class="imgUpload" src="./public/img/beidong.png" alt=""> 
                                                </a>
                                                <div class="mouseoverDiv"></div>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-2" aria-expanded="false">
                                                    <img id="qimg" class="imgUpload" src="./public/img/Q.png" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-3" aria-expanded="false">
                                                    <img id="wimg" class="imgUpload" src="./public/img/W.png" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-4" aria-expanded="false">
                                                    <img id="eimg" class="imgUpload" src="./public/img/E.png" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-5" aria-expanded="false">
                                                    <img id="rimg" class="imgUpload" src="./public/img/R.png" alt="">
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab-1" class="tab-pane active">
                                                <div class="panel-body">
                                                    <input type="text" id="pname" placeholder="技能名称" value="" class="form-control">
                                                    <input type="text" disabled value="被动技能" class="form-control">
                                                    <textarea id="pd" placeholder="技能描述" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div id="tab-2" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" id="qname" placeholder="技能名称" value="" class="form-control">
                                                    <input type="text" disabled value="快捷键：Q" class="form-control">
                                                    <textarea id="qd" placeholder="技能描述" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div id="tab-3" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" id="wname" placeholder="技能名称" value="" class="form-control">
                                                    <input type="text" disabled value="快捷键：W" class="form-control">
                                                    <textarea id="wd" placeholder="技能描述" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div id="tab-4" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" id="ename" placeholder="技能名称" value="" class="form-control">
                                                    <input type="text" disabled value="快捷键：E" class="form-control">
                                                    <textarea id="ed" placeholder="技能描述" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div id="tab-5" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" id="rname" placeholder="技能名称" value="" class="form-control">
                                                    <input type="text" disabled value="快捷键：R" class="form-control">
                                                    <textarea id="rd" placeholder="技能描述" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        <input class="btn bianjiBtn btn-info" id="button" type="button" name="" value="上架新英雄">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="././public/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="././public/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="././public/h+/js/content.min.js?v=1.0.0"></script>
    <script src="././public/h+/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="././public/h+/js/demo/peity-demo.min.js"></script>
    <script src="./public/sweetAlert/dist/sweetalert.js"></script>
</body>
<script>
    let imgUpload = document.querySelectorAll('.imgUpload');
        for (let i = 0; i < imgUpload.length; i++) {
            imgUpload[i].innerHTML = '<input class="imgUploadInput" id="img'+i+'" type="file" accept="image/jpeg,image/jpg,image/png,image/webp" onchange="con(this)"/>';
            document.querySelectorAll('.imgUploadInput')[i].addEventListener('click', function (event) {
                event.stopPropagation();
            })
        }
        let fun = function (i) {
            document.querySelectorAll('.image-picker')[i].addEventListener('mouseover', function () {
                document.querySelectorAll('.image-picker')[i].classList.add('mouseover');
            })
            document.querySelectorAll('.image-picker')[i].addEventListener('mouseout', function () {
                document.querySelectorAll('.image-picker')[i].classList.remove('mouseover');
            })
            document.querySelectorAll('.image-picker')[i].addEventListener('click', function (event) {
                document.querySelectorAll('.imgUploadInput')[i].click();
            })
        }
        fun(0);
        fun(1);
        let add = function(){
            this.classList.add('mouseover1');
        }
        let remove = function () {
            this.classList.remove('mouseover1');
        }
        let upload = function(){
            this.parentNode.firstElementChild.firstElementChild.firstElementChild.click();
        }
        let a = document.querySelectorAll('a.image-picker');
        let mouserover = function(){
            let mouseoverDiv = document.querySelector('div.mouseoverDiv');
            mouseoverDiv.parentNode.removeChild(mouseoverDiv);

            let div = document.createElement("div");
            div.className = "mouseoverDiv";
            this.parentNode.appendChild(div);
            div.classList.add('mouseover1');
            div.addEventListener('mouseover', add);
            div.addEventListener('mouseout', remove);
            div.addEventListener('click', upload); 
        }
        let mouseoverDiv = document.querySelector('div.mouseoverDiv');
        mouseoverDiv.addEventListener('mouseover', add);
        mouseoverDiv.addEventListener('mouseout', remove);
        mouseoverDiv.addEventListener('click', upload);
        for(let i=0;i<a.length;i++){
            a[i].addEventListener('click',mouserover);
        }
        let con = function (e) {
            let file = e.files[0];
            if (file == undefined) return;
            let reader = new FileReader();
            reader.onload = function (event) {
                let dataUrl = event.target.result;
                e.parentNode.src = dataUrl;
            }
            reader.readAsDataURL(file);
        }
    
    let emIs = document.querySelectorAll('i');
    let iSelects = document.querySelectorAll('.iSelect');
    for(let i=0;i< iSelects.length;i++){
        iSelects[i].addEventListener('change',function(){
            emIs[i].style.width = (this.value*20)+"%";
        })
    }
    let oldimg = $('#img')[0].src;
    let oldbig_img = $('#big_img')[0].src;
    let oldpimg = $('#pimg')[0].src;
    let oldqimg = $('#qimg')[0].src;
    let oldwimg = $('#wimg')[0].src;
    let oldeimg = $('#eimg')[0].src;
    let oldrimg = $('#rimg')[0].src;
    $('.bianjiBtn').on('click', function () {
        let formData = new FormData();
        let img = $('#img')[0].src;
        if(img== oldimg){
            swal("英雄头像未上传", "", "info");
            return;
        }
        formData.append("img", document.querySelectorAll('input[type=file]')[0].files[0]);
        let big_img = $('#big_img')[0].src;
        if (big_img == oldbig_img) {
            swal("英雄默认皮肤未上传", "", "info");
            return;
        }
        formData.append("big_img", document.querySelectorAll('input[type=file]')[1].files[0]);
        let name = $('#name').val();
        if (!name) {
            swal("英雄名称未录入", "", "info");
            return;
        }
        formData.append("name", name);
        let big_name = $('#big_name').val();
        if (!big_name) {
            swal("英雄称号未录入", "", "info");
            return;
        }
        formData.append("big_name", big_name);
        let type = $('#type').val();
        if (type == null) {
            swal("英雄类型未选择", "", "info");
            return;
        }
        formData.append("type", type);
        let live = $('#live').val();
        formData.append("live", live);
        let physics = $('#physics').val();
        formData.append("physics", physics);
        let magic = $('#magic').val();
        formData.append("magic", magic);
        let difficulty = $('#difficulty').val();
        formData.append("difficulty", difficulty);
        let pimg = $('#pimg')[0].src;
        if (pimg == oldpimg) {
            swal("英雄被动技能图未上传", "", "info");
            return;
        }
        formData.append("pimg", document.querySelectorAll('input[type=file]')[2].files[0]);
        let pname = $('#pname').val();
        if (!pname) {
            swal("英雄被动技能名称未录入", "", "info");
            return;
        }
        formData.append("pname", pname);
        let pd = $('#pd').val();
        if (!pd) {
            swal("英雄被动技能描述未录入", "", "info");
            return;
        }
        formData.append("pd", pd);
        let qimg = $('#qimg')[0].src;
        if (qimg == oldqimg) {
            swal("英雄Q技能图未上传", "", "info");
            return;
        }
        formData.append("qimg", document.querySelectorAll('input[type=file]')[3].files[0]);
        let qname = $('#qname').val();
        if (!qname) {
            swal("英雄Q技能名称未录入", "", "info");
            return;
        }
         formData.append("qname", qname);
        let qd = $('#qd').val();
        if (!qd) {
            swal("英雄Q技能描述未录入", "", "info");
            return;
        }
        formData.append("qd", qd);
        let wimg = $('#wimg')[0].src;
        if (wimg == oldwimg) {
            swal("英雄W技能图未上传", "", "info");
            return;
        }
        formData.append("wimg", document.querySelectorAll('input[type=file]')[4].files[0]);
        let wname = $('#wname').val();
        if (!wname) {
            swal("英雄W技能名称未录入", "", "info");
            return;
        }
        formData.append("wname", wname);
        let wd = $('#wd').val();
        if (!wd) {
            swal("英雄W技能描述未录入", "", "info");
            return;
        }
        formData.append("wd", wd);
        let eimg = $('#eimg')[0].src;
        if (eimg == oldeimg) {
            swal("英雄E技能图未上传", "", "info");
            return;
        }
        formData.append("eimg", document.querySelectorAll('input[type=file]')[5].files[0]);
        let ename = $('#ename').val();
        if (!ename) {
            swal("英雄E技能名称未录入", "", "info");
            return;
        }
        formData.append("ename", ename);
        let ed = $('#ed').val();
        if (!ed) {
            swal("英雄e技能描述未录入", "", "info");
            return;
        }
        formData.append("ed", ed);
        let rimg = $('#rimg')[0].src;
        if (rimg == oldrimg) {
            swal("英雄R技能图未上传", "", "info");
            return;
        }
        formData.append("rimg", document.querySelectorAll('input[type=file]')[6].files[0]);
        let rname = $('#rname').val();
        if (!rname) {
            swal("英雄R技能名称未录入", "", "info");
            return;
        }
        formData.append("rname", rname);
        let rd = $('#rd').val();
        if (!rd) {
            swal("英雄R技能描述未录入", "", "info");
            return;
        }
        formData.append("rd", rd);
        $.ajax({
            url: 'index.php?c=addhero&a=addhero',
            type: 'post',
            dataType: 'json',
            processData: false,
            contentType: false,
            data: formData,
        }).done(function (data) {
            if(data){
                window.location.href = "index.php?c=hero&a=herodata"; 
            }else{
                swal("服务器异常，未能正确录入", "", "error");
            }
        }).fail(function (error) {
            swal("服务器异常，未能正确录入", "", "error");
        });
    })
  
</script>
</html>